<template>
  <div class="commodiSettle">
    <div class="dateselect">
      <dateselect @listenEvent="dtfn" :querydate="querydate" />
    </div>
    <div class="table">
      <!-- <div class="flex">
        <el-button size="mini" type="primary">添加</el-button>
      </div> -->
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="商户名称" prop="businessName"></el-table-column>
        <el-table-column label="价格" prop="costPrice">
          <template slot-scope="scope">
            <div
              slot="reference"
              class="name-wrapper"
            >{{( scope.row.costPrice/100).toFixed(2)}}&nbsp;元</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)"><span style="color:#3dc2c2;font-size:14px">编辑</span></el-button> -->
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              <span style="font-size:14px">商品列表</span>
            </el-button>
          </template>
        </el-table-column>
        <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
      </el-table>

      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="date.page"
        :page-sizes="pageSizes"
        :page-size="date.perPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
      <div class="flex">
        <el-button size="mini" type="primary" @click="Export()">导出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dateselect from "./dateselect";
export default {
  name: "commodiSettle",
  components: {
    dateselect
  },
  data() {
    return {
      form: {},
      value: "",
      tableData: [],
      pageSizes: [1, 5, 10, 20],
      totalCount: 1, //个数选择器
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      date: {
        startTime: "2020-05-01",
        endTime: "2020-07-30",
        perPage: 10,
        page: 1
      },
      querydate: [new Date(), new Date()],
      loading: true
    };
  },
  created() {
    // this.querydate.startTime = this.date.startTime;
    // this.querydate.endTime = this.date.endTime;
    // console.log(this.querydate);
  },
  mounted() {
    this.getMerchant();
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.loading=false;
      this.date.perPage = val;
      this.date.page = 1;
      this.getMerchant();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);  
      this.loading=false;
      this.date.page = val;
      this.getMerchant(); 
    },
    handleClick(row) {
      // console.log(row.businessId);
      let querydata = this.date;
      querydata.businessId = row.businessId;
      console.log(querydata);
      // this.getDetail()
      this.$router.push({
        path: "/commodiSettle/commoList",
        query: { id: querydata }
      });
    },
    getMerchant() {
      this.$store
        .dispatch("commodiSettle/getMerchant", this.date)
        .then(data => {
          if (data) {
            // console.log(data);
             this.loading=false;
            this.tableData = data.items;
            this.totalCount = data.total;
            
          } else {
            //  console.log("无数据")
          }
        })
        .catch(err => {
          console.log(err);
        });
        this.loading=true;
    },
    dtfn(param) {
      // console.log(param)
      this.date.startTime = param.startTime;
      this.date.endTime = param.endTime;
      // console.log(this.date);
      
      this.getMerchant();
    },
    Export() {
      this.$store
        .dispatch("Export/getMerexport", this.date)
        .then(data => {
          if (data) {
            // console.log(data.url);
            window.location.href = data.url;
          } else {
            //  console.log("无数据")
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
}
/deep/ .el-table__empty-text{
    width: 100%;
  }
.dateselect {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.table {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>